<template>
  <div class="news-item" @click="clickJobDetail(newsData)">
    <div class="left">
      <div class="title">
        <div class="position">
          {{ newsData.title }}
        </div>
        <div class="salar">
          {{ newsData.salary }}
        </div>
      </div>
      <div class="ask">
        <div v-for="(item, idx) in newsData.ask" :key="idx" class="askItem">
          {{ item }}
        </div>
      </div>
      <div class="welfare">
        <div v-for="(item, idx) in newsData.welfare" :key="idx" class="welfareItem">
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    newsData: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    clickJobDetail(item) {
      // 使用 navigateTo 导航，下一个页面返回时可以直接用 navigateBack
      uni.navigateTo({
        url: `/package-guest/pages/job-details/index?name=${item.title}&id=${item.id}`,
      })
    },
  },
}
</script>
  <style lang="scss" scoped>
  .news-item {
    width: 93%;
    display: flex;
    column-gap: 26px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    height: 92px;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
    border-radius: 4px;
    .left {
      box-sizing: border-box;
      height: 100%;
      padding: 10px 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width:100%;
    }
    .title {
      font-size: 14px;
      font-weight: 400;
      color: #000000;
      line-height: 20px;
      letter-spacing: 1px;
      display: flex;
      justify-content: space-between;
    //   padding-right: 10px;
      .position{
        color:#000;
        font-size: 16px;
        font-weight: 600;
      }
      .salar{
       color:#739ECA;
       font-size: 16px;
       font-weight: 600;
      }
    }
    .ask {
      font-size: 12px;
      font-weight: normal;
      color: #666;
      line-height: 10px;
      display: flex;
      align-items: center;
      .askItem{
        background:#F5F7F7;
        padding: 3px 5px 3px 5px;
        margin-right: 5px;
        border-radius: 2px;
      }
    }
    .welfare{
        font-size: 12px;
        font-weight: normal;
        color: #739ECA;
        line-height: 10px;
        display: flex;
        align-items: center;
        .welfareItem{
            background:#f1f5f9;
            padding: 3px 5px 3px 5px;
            margin-right: 5px;
            border-radius: 2px;
        }
    }
  }
  </style>
